<template>
	<view>
		<u-navbar title="积分商城" :autoBack="true" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19" color="#ffffff"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px" color="#ffffff"></u-line>
				<u-icon name="home" size="20" color="#ffffff" @click.stop="onToHomePage"></u-icon>
			</view>
		</u-navbar>
		<view class="title_welfare" :style="'margin-top:' + navH + 'px;'">
			<view>
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<u-grid :border="false" col="2">
						<u-grid-item v-for="(value,index) in goodsList" :key="index">
							<view style="width: 90%;margin: 10px auto;">
								<image :src="value.goods_thumb" mode="" style="width: 100%;height: 150px;"
									mode="aspectFit" @click="toDetail(value)"></image>
								<view @click="toDetail(value)">
									<view>
										{{value.goods_name}}
									</view>
									<view class="fs-14">
										兑换积分：{{value.exchange_integral}}
									</view>
								</view>
								<view style="padding-top: 10px;" class="acea-row row-between row-middle">
									<u-number-box :min="1" v-model="value.number" buttonSize="30"></u-number-box>
									<view @click="exchange(value)" style="padding: 5px 8px;
										border-radius: 100%;background-color: green;color: white;text-align: center;font-size: 14px;">兑</view>
								</view>
								<!-- <view style="position: absolute;bottom: 10px;right:20px;display: flex;"
									@click.stop="toChat(value)">
									<view class="iconfont icon-kefujiedai blink" style="font-size: 30px;"></view>
								</view> -->
							</view>
						</u-grid-item>
					</u-grid>

				</mescroll-body>
			</view>
			<u-popup :show="pop_show" :round="10" mode="center" @close="pop_close" :closeable="true"
				:customStyle="{'width':'100%','height':'500px'}" :safeAreaInsetTop="true">
				<view style="text-align: center;width: 100%;height: 40px;line-height: 40px;font-size: 24px;">
					产品介绍
				</view>
				<view style="padding: 10px;overflow-y: scroll;">
					<rich-text :nodes="pop_content | filtersRichText"></rich-text>
				</view>
			</u-popup>

			<u-popup :show="kefu_show" @close="kefu_close">
				<view class="padding20">
					<u-radio-group v-model="kefu_id" @change="kefuGroupChange" placement="column">
						<u-radio :customStyle="{marginBottom: '8px',padding: '10px'}" v-for="(item, index) in kefu_list"
							:key="index" :label="item.username" :name="item.id">
						</u-radio>
					</u-radio-group>
					<view class="pad30">
						<u-button text="确定" @click="kefu_confirm" type="primary"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		exchange_goods_list,
		supplier_kefu
	} from '@/api/store.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const common = require('@/mixins/common');
	var options = {};
	common(options);
	export default {
		data() {
			return {
				goodsList: [],
				navH: '',
				theme_color: getApp().globalData.theme_color,
				pop_show: false,
				pop_content: '',
				kefu_show: false,
				kefu_list: [],
				kefu_id: '',
				kefu_name: '',
			}
		},
		mixins: [MescrollMixin, {
			methods: options
		}],
		filters: {
			filtersRichText(html) { //控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, (match, capture) => {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, (match, capture) => {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		},
		onLoad() {
			this.navH = getApp().globalData.navHeight / 2;
			if (!this.isLogin) {
				toLogin();
			}
		},
		computed: mapGetters(['isLogin', 'app_token']),
		methods: {
			toChat(item) {
				supplier_kefu({
					app_token: this.app_token,
					supplier_id: item.supplier_id,
					type: 2
				}).then(res => {
					if (res.data.length) {

						// this.kefu_list = res.data;
						// this.kefu_show = true;
						var kefu = res.data[0]

						this.$util.Tips('/pages/chat/chat_supplier/index?supplier_name=' + kefu.username +
							'&supplier_id=' + kefu.id + '&avatar=' + kefu.avatar + '&goodsId=' +
							item.goods_id)

					} else {
						this.$util.Tips({
							title: '暂无客服在线，请稍后联系'
						})
					}
				})
			},
			kefuGroupChange(n) {
				this.kefu_id = n;
				for (var i = 0; i < this.kefu_list.length; i++) {
					if (this.kefu_list[i].id == this.kefu_id) {
						this.kefu_name = this.kefu_list[i].username;
					}
				}
			},
			kefu_close() {
				this.kefu_show = false;
			},
			kefu_confirm() {
				if (this.kefu_id == '') {
					return this.$util.Tips({
						title: '请选择客服'
					})
				}
				this.$util.Tips('/pages/chat/chat_supplier/index?supplier_name=' + this.kefu_name +
					'&supplier_id=' + this.kefu_id + '&avatar=' + this.goodsList.shop_info.shop_logo + '&goodsId=' +
					this.goodsList.goods_attr[0].goods_id)
			},
			pop_close() {
				this.pop_show = false;
				this.pop_content = '';
			},
			upCallback(page) {
				exchange_goods_list({
					page: page.num,
					supplier_id: getApp().globalData.supplier_id,
				}).then(res => {
					this.mescroll.endSuccess(res.data.length);

					if (page.num == 1) this.goodsList = [];

					if (res.status >= 0 && res.data.length > 0) {
						for (let value of res.data) {
							const obj = {
								number: 1,
								...value
							}
							this.goodsList.push(obj);
						}

					}

				}).catch(() => {
					this.mescroll.endErr();
				})
			},
			exchange: function(e) {
				uni.navigateTo({
					url: '/pages/users/user_integral/order/index?rec_id=' + e.goods_id + '&number=' + e.number
				})
			},
			toDetail(data) {
				// uni.navigateTo({
				// 	url: '/pages/users/user_integral/goods_detail/index?goods_id=' + data.goods_id +
				// 		'&exchange_integral=' + data.exchange_integral
				// })
				this.pop_content = data.goods_desc;
				this.pop_show = true;
			},
			// #ifdef MP-WEIXIN
			// 小程序分享
			onShareAppMessage: function(options) {
				var that = this;
				var path = '/pages/users/user_integral/integral_shop/index'
				return {
					title: '积分商城',
					path: path,
					imageUrl: '',
					success: function(res) {},
					fail: function() {},
				};
			},

			// 分享到朋友圈
			onShareTimeline(res2) {
				var that = this;
				var path = '/pages/users/user_integral/integral_shop/index'
				return {
					title: '积分商城',
					path: path,
					imageUrl: '',
					success: function(res) {},
					fail: function() {},
				}
			},
			// #endif
		}
	}
</script>

<style scoped lang="scss">

</style>